<template>
  <div class="f-pa f-bclos">
    <div class="lig-build f-bavg flex-cent" ref="floorBox">
      <div class="build-img " :class="[floorIMgClass,bounceIn]" ref="floorImg"></div>
      <div class="floor-num f-iScroll" id="floorNum" ref="floorNum">
        <ul class="floor-ul">
          <li v-for="(item,index) in floorNumList" :key="item.num" :class="item.selected==1?'active':''" @touchstart="clickFloorNum(index,$event)">
            <span>{{item.num}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="lig-switch f-bclos">
      <div class="switch-tit f-brow ">
        <div class="set-tit-line f-bavg"></div>
        <div class="set-tit-name">模式切换</div>
        <div class="set-tit-line f-bavg"></div>
      </div>
      <div class="f-bavg switch-list  f-iScroll" ref="switchBtn">
        <ul class="switch-btn">
          <li v-for="item in moduleList" :key="item.id" :class="item.unlock == 1?'active':''" @touchstart.stop="changeModule(item.id,$event)">{{item.name}}</li>
        </ul>
      </div>
    </div>
    <!-- 侧边栏 -->
    <div class=" f-bclos lig-aim " :class="bounce">
      <div class="flex-cent aim-logo">
        <div class="aim-logo-icon"></div>
      </div>
      <div class="f-bavg f-bclos">
        <div class="f-brow aim-tit">
          <div class="f-bavg"></div>
          <div class="aim-tit-name">模式详情</div>
          <div class="f-bavg "></div>
        </div>
        <div class="f-bavg aim-floor f-iScroll" id="aimFloor" ref="aimFloor">
          <ul class="aim-ul">
            <li v-for="item in moduleInfoList" :key="item.id" :class="item.cock==1?'active':''">
              <span @touchstart="changeModuleInfo(item.id)">
                <em class="f-toe">{{item.name}}</em>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="flex-cent aim-close">
        <div class="aim-close-btn" ref="" @touchstart="hideAim()"></div>
      </div>
    </div>

    <div class="nav-btn" ref="navBtn" @touchstart="showAim()"></div>
  </div>
</template>

<script>
import IScroll from 'iscroll'
export default {
  name: "Floor",
  data() {
    return {
      slipChild: true,
      floorNumList: [], //存放楼层 数据
      moduleList: [], // 存放模式 数据
      moduleInfoList: [], // 存放模式详情 数据
      floorNum: "", //  iscroll 对象
      fnFlag: true,
      switchBtn: "", //  iscroll 对象
      swbtFlag: true,
      aimFloor: "", // iscroll 对象
      afFlag: true,
      startX: "",
      startY: "",
      floorIndex: 0,
      floorIMgClass: "",
      bounceIn: "", // floor 动画
      bounce: "" //侧边栏 动画
    };
  },
  created() {
    this.getMoudleData();
  },
  mounted() {
    this.$nextTick(function() {
      //楼层数 IScroll
      this.floorNum = new IScroll(this.$refs.floorNum);
      this.floorNum.on("scrollStart", () => {
        this.fnFlag = false;
      });
      this.floorNum.on("scrollEnd", () => {
        this.fnFlag = true;
      });
      //模式切换 IScroll
      this.switchBtn = new IScroll(this.$refs.switchBtn, {
        scrollX: true,
        scrollY: false,
      });
      //侧边栏 模式详情 IScroll
      this.aimFloor = new IScroll(this.$refs.aimFloor);

      this.initSwitchTouch(); //模式切换监听事件
      this.listenerTouch(); //楼层 滑动监听事件
    });
  },
  updated() {
    this.$nextTick(function() {
      this.floorNum.refresh();
      this.switchBtn.refresh();
      this.aimFloor.refresh();
    });
  },
  methods: {
    //获取module 信息
    getMoudleData() {
      this.$http
        .post(
          process.env.API_HOST + "/static/floor.json",
          {},
          { headers: { "Content-Type": "application/json" } }
        )
        .then(
          res => {
            this.moduleList = res.body.result; //模式信息
            this.floorNumList = res.body.floor; //楼层信息
            this.moduleInfoList = res.body.detail; //模式详情 信息
            this.floorIMgClass = this.floorNumList[0].imgName;
          },
          error => {
            console.log(error);
          }
        );
    },
    //滑动方法
    switchTouchMove(e) {
      e.preventDefault();
      this.$parent.slip = false;
    },
    switchTouchEnd(e) {
      e.preventDefault();
      if (this.slipChild) {
        setTimeout(() => {
          this.$parent.slip = true;
        }, 1000);
      }
    },
    //模式切换 限制 路由切换
    initSwitchTouch() {
      this.$refs.switchBtn.addEventListener(
        "touchmove",
        this.switchTouchMove.bind(this)
      );
      this.$refs.switchBtn.addEventListener(
        "touchend",
        this.switchTouchEnd.bind(this)
      );
    },
    //模式切换
    changeModule(id, e) {
      if ($(e.currentTarget).hasClass("active")) {
        return false;
      }
      this.moduleList.map(marr => {
        if (marr.id == id) {
          marr.unlock = 1;
        } else {
          marr.unlock = 0;
        }
      });
    },
    //滑动 事件
    touchStart(e) {
      e.preventDefault();
      (this.startX = e.changedTouches[0].pageX),
        (this.startY = e.changedTouches[0].pageY);
    },
    touchEnd(e) {
      e.preventDefault();
      if (this.fnFlag != true) {
        return false;
      }
      let X = e.changedTouches[0].pageX - this.startX;
      let Y = e.changedTouches[0].pageY - this.startY;
      if (Math.abs(X) > Math.abs(Y) && X > 0) {
      } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
      } else if (Math.abs(Y) > Math.abs(X) && Y > 0 && this.floorIndex > 0) {
        this.floorIndex -= 1;
        this.changeFloorNum(this.floorIndex, "bounceInDown");
      } else if (
        Math.abs(Y) > Math.abs(X) &&
        Y < 0 &&
        this.floorIndex < this.floorNumList.length - 1
      ) {
        this.floorIndex += 1;
        this.changeFloorNum(this.floorIndex, "bounceInUp");
      } else {
        //console.log(this.floorNum.options);
      }
    },

    //监听 滑动事件
    listenerTouch() {
      //监听 floorbox 滑动事件
      this.$refs.floorBox.addEventListener(
        "touchstart",
        this.touchStart.bind(this)
      );
      this.$refs.floorBox.addEventListener(
        "touchend",
        this.touchEnd.bind(this)
      );
    },
    //改变 选中 楼层
    changeFloorNum(index, cls) {
      this.floorIMgClass = this.floorNumList[index].imgName;
      this.bounceIn = cls;
      setTimeout(() => {
        this.bounceIn = "";
      }, 800);
      this.floorNumList.map(arr => {
        if (this.floorNumList.indexOf(arr) == index) {
          arr.selected = 1;
        } else {
          arr.selected = 0;
        }
      });
    },
    //点击改变 楼层 和 img
    clickFloorNum(index,e) {
      if($(e.currentTarget).hasClass('active')){return false;}
      if (this.fnFlag != false) {
        this.floorIndex = index;
        this.changeFloorNum(this.floorIndex, "bounceInUp");
      }
    },
    //显示侧边栏模式详情
    showAim() {
      $(this.$refs.navBtn).hide("300");
      this.bounce = "bounceIn";
      this.$parent.zoomInOut = "zoomIn";
      this.$parent.slip = false;
      this.slipChild = false;
    },
    //隐藏 侧边栏模式详情
    hideAim() {
      this.bounce = "bounceOut";
      this.$parent.zoomInOut = "zoomOut";
      this.$parent.slip = true;
      this.slipChild = true;
      $(this.$refs.navBtn).show("500");
      setTimeout(() => {
        this.bounce = "";
        this.$parent.zoomInOut = "";
      }, 1000);
    },
      //模式详情 控制开关
    changeModuleInfo(id) {
      this.moduleInfoList.find(arr => {
        if (arr.id == id) {
          if (arr.cock == 0) {
            arr.cock = 1;
          } else {
            arr.cock = 0;
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.bounceInUp {
  animation: bounceInUp 1s 0s ease both;
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInDown {
  animation: bounceInDown 1s 0s ease both;
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
